<template>
  <div class="common-aside">
    <div class="logo">
      <img
        :src="
          $store.state.base.navCollapse
            ? require('../../../assets/imgs/01.jpg')
            : require('../../../assets/imgs/02.jpg')
        "
        width="50"
        alt=""
      />
    </div>
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      :collapse="$store.state.base.navCollapse"
      router
      background-color="rgb(48, 65, 86)"
      text-color="#fff"
      active-text-color="#1890ff"
    >
      <div v-for="nav in $store.getters['permission/authNavs']" :key="nav.label">
        <el-menu-item :index="nav.path" v-if="!nav.children">
          <i :class="nav.icon"></i>
          <span slot="title">{{nav.label}}</span>
        </el-menu-item>
        <el-submenu :index="nav.label" v-if="nav.children">
          <template slot="title">
            <i :class="nav.icon"></i>
            <span>{{nav.label}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="subNav in nav.children"
              :key="subNav.path"
              :index="subNav.path"
            >{{subNav.label}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.common-aside {
  .logo {
    width: 100%;
    height: 100px;
    color: #fff;
  }
  .el-menu-item.is-active {
    background-color: #fff !important;
  }
  ::v-deep .el-submenu__title {
    &:hover {
      background-color: rgba(38, 52, 69) !important;
    }
  }
  .el-menu-item {
    &:hover {
      background-color: rgba(38, 52, 69) !important;
    }
  }
}
</style>
